Component({
  properties: {
    list: {
      type: Array,
      value: []
    }
  },

  data: {
    leftList: [],
    rightList: [],
    leftHeight: 0,
    rightHeight: 0
  },

  lifetimes: {
    attached() {
      this.init();
    }
  },

  methods: {
    init() {
      // 清空列数据
      this.setData({
        leftList: [],
        rightList: [],
        leftHeight: 0,
        rightHeight: 0
      });

      // 模拟加载流程，等图片触发 onload 事件动态分配
      this.tempList = [...this.data.list];
    },

    onImageLoad(e) {
      const { index, col } = e.currentTarget.dataset;
      const query = this.createSelectorQuery();
      const imgSelector = `.${col === 'left' ? 'column:first-child' : 'column:last-child'} image:nth-child(${index + 1})`;

      query.select(imgSelector).boundingClientRect(rect => {
        if (!rect) return;

        const height = rect.height;

        let { leftList, rightList, leftHeight, rightHeight } = this.data;
        const item = this.tempList[index];

        if (leftHeight <= rightHeight) {
          leftList.push(item);
          leftHeight += height;
        } else {
          rightList.push(item);
          rightHeight += height;
        }

        this.setData({
          leftList,
          rightList,
          leftHeight,
          rightHeight
        });
      }).exec();
    }
  }
});
